<template>
  <h1>组合式API-watch函数-监听响应式数据</h1>
  <h1>{{ money }}</h1>
  <h2>{{ count }}</h2>
  <button @click="money += 1000">老板加钱</button>
  <button @click="count++">老板加人</button>
  <h3>用户信息{{ user }}</h3>
  <button @click="user.age++">用户年龄增加</button>
  <button @click="user.name += '啊'">点击用户啊一下</button>
</template>

<script setup lang="ts">
/**
 * 学习目标 ：
 *    watch 侦听器(监听)，接收三个参数
 *      1.参数1：监视的数据源
 *      2.参数2：回调函数
 *      3.参数3：额外的配置
 */

import { ref, watch } from "vue";

const money = ref(15000);
const count = ref(30);

// 监听单个 ref
// watch(money,(val,oldval)=>{
// console.log('money 变化了，新值',val);
// })

// 监听多个ref
watch([money, count], (val) => {
  console.log("money 或 count 变化了，新值是", val);
});

const user = ref({
  name: "zs",
  age: 18,
});

// 监听 ref 复杂数据
// watch(
//   user,
//   (val) => {console.log("user 发生改变的回调函数，值", val);},
//   {
//     deep: true,      // 深度监听
//     immediate: true, // 立即监听
//   });

// 监听对象的某个属性的变化
watch(
  // 需要写成函数写法
  () => {
    return user.value.age;
  },
  (val) => {
    console.log("你的对象年龄变化", val);
  }
);
</script>